<template>
	<div class="crud-container flex-column pt-1 plr-1">
		<cl-tabs-card v-model="activeTab" :tabs="tabs">
			<template #suffix>
				<el-button icon="el-icon-plus" size="small" v-if="activeTab == 'flowPool'" v-auth="'store_landinglandinglist_add'" type="primary" @click="openFlowPoolForm()">
					新增客服组
				</el-button>
				<el-button icon="el-icon-plus" size="small" v-if="activeTab == 'land'" v-auth="'store_landinglandinglist_add'" type="primary" @click="openLandForm()">
					新增落地页
				</el-button>
				<el-button icon="el-icon-plus" size="small" v-if="activeTab == 'account'" type="primary" @click="openOfficialAccount">
					新增公众号
				</el-button>
				<el-button type="primary" size="small" v-auth="'store_landinglandinglist_pzkf'" @click="openDrawer('deployCusService')">
					<icon-svg name="set_service" />
					配置客服
				</el-button>
			</template>
		</cl-tabs-card>
		<cl-flex1 style="overflow: hidden">
			<transition name="fade-transform" mode="out-in">
				<keep-alive>
					<land-list v-if="activeTab == 'land'" ref="land" />
					<city-list v-if="activeTab == 'city'" ref="city" />
					<account-list v-if="activeTab == 'account'" ref="account" />
					<flow-pool v-if="activeTab == 'flowPool'" ref="flowPool" ></flow-pool>
				</keep-alive>
			</transition>
		</cl-flex1>
		<promo-link ref="link" :type="activeTab" />
		<deploy-cus-service ref="deployCusService" />
		<land-form ref="landForm" @confirm="landFormConfirm" />
		<flow-pool-form ref="flowPoolForm" @confirm="flowPoolFormConfirm" />
		
	</div>
</template>

<script>
	// 落地页
	import LandList from "./components/list/land";
	// 城市
	import CityList from "./components/list/city";
	//公众号
	import AccountList from "./components/account/account";
	// 客服组
	import FlowPool from "./components/flowPool/list"
	import FlowPoolForm from "./components/flowPool/flow-pool-form";

	// 推广链接
	import PromoLink from "./components/list/promo-link";
	// 配置客服
	// import DeployCusService from "./components/list/deploy-cus-service";
	// 加微变更记录
	import LandForm from "./components/list/land-form";
	export default {
		name: "WideLandingList",
		provide() {
			return {
				parent: this
			};
		},
		components: {
			LandForm,
			LandList,
			AccountList,
			CityList,
			FlowPool,
			FlowPoolForm,

			PromoLink,
			DeployCusService: () => import("./components/list/deploy-cus-service"),
		},
		data() {
			return {
				activeTab: "land",
				tabs: [
					{ label: "落地页", name: "land" },
					// { label: "城市", name: "city" },
					{ label: "公众号", name: "account" },
					{ label: "客服组", name: "flowPool" }
				]
			};
		},
		methods: {
			// 链接
			openLink(data) {
				this.$refs.link.open(data);
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.land && this.$refs.land.refresh();
					this.$refs.city && this.$refs.city.refresh();
					this.$refs.account && this.$refs.account.refresh();
					this.$refs.flowPoolForm && this.$refs.flowPoolForm.refresh();
				});
			},
			openDrawer(ref) {
				this.$refs[ref].open();
			},
			// 添加落地页
			openLandForm(editing = false, data = {}) {
				this.$refs.landForm.open(editing, data);
			},
			landFormConfirm() {
				if (this.activeTab != "land") {
					this.activeTab = "land";
					setTimeout(() => {
						this.refresh();
					}, 1000);
					return;
				}
				this.refresh();
			},
			//添加公众号
			openOfficialAccount() {
				this.$refs.account.open();
			},
			// 添加客服组
			openFlowPoolForm(editing = false, data = {}) {
				this.$refs.flowPoolForm.open(editing, data);
			},
			flowPoolFormConfirm() {
				this.$refs.flowPool.refresh();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.crud-container {
		height: 100%;
		box-sizing: border-box;
		overflow: hidden;
		background: #fff;
	}
</style>
